<template>
  <div>
    <!-- 
      code: "Acl" // 标识名称
      deleted: false
      gmtCreate: "2020-11-30 16:40:08"
      gmtModified: "2020-11-30 16:40:08"
      id: "1333329957008228353"
      level: 2
      name: "权限管理"
      pid: "1" // 所属节点的id
      select: false
      status: null
      toCode: ""
      type: 1  // 1: 路由 2: 按钮
      children: []
    -->
    <!-- 
      code: "btn.Role.assgin"
      deleted: false
      gmtCreate: "2020-11-30 16:50:13"
      gmtModified: "2020-12-01 08:13:47"
      id: "1333332492158812161"
      level: 4
      name: "分配权限"
      pid: "1333330152781561858"
      select: false
      status: null
      toCode: "RoleAuth"
      type: 2
     -->
    <el-table
      border
      :data="permissionData"
      style="margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />

      <el-table-column prop="toCode" label="跳转权限值" />

      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            :disabled="row.level === 4"
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="toAddPermission(row)"
          />

          <el-button
            type="primary"
            size="small"
            :disabled="row.level === 1"
            :title="row.level === 4 ? '修改功能' : '修改菜单'"
            icon="el-icon-edit"
            @click="modifyTheMenu(row)"
          />

          <el-button
            :disabled="row.level === 1"
            type="danger"
            size="small"
            title="删除"
            icon="el-icon-delete"
            @click="removePermissions(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form ref="permissionRef" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="permissionName" />
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permissionCode" />
        </el-form-item>

        <el-form-item
          v-if="permissionInfos.level === 4"
          label="跳转路由权限值"
          prop="toCode"
        >
          <el-input v-model="updatePermissionInfos.toCode" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button  @click="cancelEditing">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import permissionApi from "@/api/acl/permission";
export default {
  name: "Permission",
  data() {
    return {
      permissionData: [],
      dialogVisible: false,
      permissionName: "",
      permissionCode: "",
      permissionInfos: this.permissionInfo(),
      updatePermissionInfos: this.updatePermissionInfo(),
      isShow: false,
    };
  },
  mounted() {
    this.getPermissionList();
  },
  methods: {
    //获取数据展示
    async getPermissionList() {
      try {
        let result = await permissionApi.getPermissionList();
        this.permissionData = result.data.children;
      } catch (error) {
        console.log(error);
      }
    },
    //删除按钮
    async removePermissions(row) {
      try {
        await permissionApi.removePermission(row.id);
        this.getPermissionList();
        this.$message({
          type: "success",
          message: "删除权限成功",
        });
      } catch (error) {
        console.log(error);
      }
    },
    //保存一个权限项
    permissionInfo() {
      return {
        type: null,
        level: null,
        name: null,
        code: null,
        toCode: "",
        pid: null,
      };
    },
    //更新一个权限项
    updatePermissionInfo() {
      return {
        type: null,
        level: null,
        name: null,
        code: null,
        toCode: "",
        id: null,
        gmtCreate: null,
        gmtModified: null,
        deleted: false,
        pid: null,
        status: null,
        children: [],
        select: false,
      };
    },
    //添加一个新的权限
    toAddPermission(row) {
      this.dialogVisible = true;
      if (row.level === 3) {
        Object.assign(this.updatePermissionInfos, this.permissionInfos);
      }
      this.permissionInfos.pid = row.pid;
      this.permissionInfos.level = row.level + 1;
      this.permissionInfos.type = row.type === 4 ? 2 : 1;
    },
    //保存按钮
    async addOrUpdatePermission(){
      if(this.isShow){
        this.updatePermissionInfos.name = this.permissionName
        this.updatePermissionInfos.code = this.permissionCode
        try {
          await this.updatePermission()
          this.getPermissionList()
        } catch (error) {
          this.$message.error('更新数据失败')
          console.log(error,'更新数据失败');
        }
        this.isShow = false
      }else{
        this.permissionInfos.name = this.permissionName;
        this.permissionInfos.code = this.permissionCode;
        try {
          await this.addPermission()
          this.getPermissionList()
        } catch (error) {
          this.$message.error('添加数据失败')
          console.log(error,'添加数据失败');
        }
      }
      this.permissionName = ''
      this.permissionCode = ''
      this.permissionInfos = this.permissionInfo();
      this.updatePermissionInfos = this.updatePermissionInfo();
      this.dialogVisible = false;
    },
    async addPermission() {
      try {
        await permissionApi.addPermission(this.permissionInfos);
        return Promise.resolve("ok");
      } catch (error) {
        console.error(error);
      }
    },
    //编辑
    modifyTheMenu(row){
      this.permissionName = row.name
      this.permissionCode = row.code
      this.dialogVisible = true
      this.isShow = true
      this.updatePermissionInfos.leve = row.level + 1;
      this.updatePermissionInfos.leve = row.level === 4 ? 2 : 1;
      this.updatePermissionInfos.pid = row.pid
      this.updatePermissionInfos.id = row.id

      this.updatePermissionInfos.children = row.children
      this.updatePermissionInfos.gmtCreate = row.gmtCreate
      this.updatePermissionInfos.gmtModified = row.gmtModified

    },
    async updatePermission(){
      try {
        console.log(this.updatePermissionInfos);
        await permissionApi.updatePermission(this.updatePermissionInfos)
        return Promise.resolve('ok')

      } catch (error) {
        console.error(error);
      }
    },
    //取消按钮
    cancelEditing(){
      this.dialogVisible = false
      this.permissionName = ''
      this.permissionCode = ''
      this.permissionInfos = this.permissionInfo()
      this.updatePermissionInfos = this.updatePermissionInfo()
      this.isShow = false
    },
    //叉号的回调
    handleClose(){
      this.cancelEditing()
    }
  },
};
</script>

<style scoped>
</style>